Menu
Email template design is both easier and harder than other types of design. It’s easier because you can’t use the most flashy types of styling, and it’s harder because you need to balance form with function waaaay more than with designing websites, brochures or banners. Over the years, I’ve come across a couple of common mistakes in email template design. Allow me to elaborate.
Sending one big image with “everything in it”
Some people seem to think that creating HTML emails is so hard and tiresome, that they actually believe sending an email containing nothing but a large image file is a great idea. Let me be clear about this: it’s not! This is typical spammers’ behaviour, and it will be processed as such by spam filters. Even if your JPG-email does make it to your subscriber’s inbox, the recipient is just going to see a blank screen first, since the image will need to be downloaded manually (most of the time, anyway). So do yourself and your subscribers a favour and take the time to create a proper HTML email. It’s not that hard. It can even be fun!
Using too many images
As stated above, most email clients don’t display images by default. This means that as a first impression, your subscriber will only see text and graphic HTML elements such as table cell borders and background colors. Therefore, you do not want the main ingredient of your email to be “images”.
Every image in your email needs a valid reason for existence. Simple decoration and being too lazy to create proper HTML are not valid reasons. Mind you: branding and creating a look & feel are not the same as decoration. Still, you need to consider how far you want to take your branding efforts. For example, if your website uses lots of color gradients, you might want to consider ignoring them in your email template design and using plain background colors instead.
Quick tip: if you feel the irresistable urge to include a large image (such as a flyer) in your email, upload it to your webserver. Insert a cropped version of the image into in your email, add a couple of lines of text explaining what it is about, and link to the original file on your webserver.
Using background images
A background image usually determines a great deal of the general look & feel of what’s displayed on top of the image. Most email clients don’t support background images. Therefore, you will lose a great deal of the general look & feel of your email template. You don’t want that. So don’t use background images. It’s that simple.
Using too much fancy styling like rounded corners and box shadows
CSS3 is a great thing. It enables webdevelopers to create rounded corners and box shadows with nothing but a few lines of clever code. No images required. Too bad CSS3 doesn’t sit well with Microsoft Outlook. And even worse: a lot of people still actually use Microsoft Outlook. If they were smart enough to migrate to Mozilla Thunderbird, this problem wouldn’t exist. The thing is though, Microsoft Outlook somehow seems to be embedded in the corporate world. For now, we’ll just have to live with the fact that fancy CSS3 type of styling is not going to work across the board. So you can use it, but don’t rely on it too heavily.
Sending a plain text message with a PDF attachment
Hey, so I can’t use background images. I can’t use fancy styling. I can’t just send one large JPG. But wait, how about if I just put everything in a well designed PDF file and send it along as an attachment?
…
Did you hear that buzzer? That means you’re out! Better luck next time, my friend! Attaching files to your email is not a good idea. It makes for a heavy (in KB) email, which means spam filters will have their way with it. Also, your subscribers would have to download and open the attachment before they can read your well written words or before they can have a look at your brilliant product offerings.
And even if they would go to all this trouble, you wouldn’t have a clue as to which topics they are particularly interested in, as there is no way to measure click rates in an attachment. So no, don’t even think about it!
